<template>
  <!-- If you want to apply a custom namespace, uncomment the following and apply the css configuration in `vite.config.ts`. -->
  <el-config-provider namespace="ep">
    <div class="play-container">
      <el-icon color="#409EFC">
        <Edit></Edit>
      </el-icon>
      <el-icon color="red">
        <el-icon-edit></el-icon-edit>
      </el-icon>
      <el-icon color="green" :size="20">
        <hi-icon-list6></hi-icon-list6>
      </el-icon>
      <el-icon color="yellow" :size="20">
        <hi-icon-cost-monitor></hi-icon-cost-monitor>
      </el-icon>
      <hi-icon-cost-monitor></hi-icon-cost-monitor>
      <el-icon>
        <Menu></Menu>
      </el-icon>
      <el-button @click="showMessage">test</el-button>
      <div v-loading="true" />


      <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="500"
        :before-close="handleClose"
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Edit, Menu} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox, ElNotification} from 'hive-plus'

const dialogVisible = ref(false)

const showMessage = () => {
  console.log('showMessage');
  
  ElMessage.success('test')
  ElMessageBox({
    title: 'test',
    message: 'test',
  })
  ElNotification({
    title: 'Success',
    message: 'This is a message that does not automatically close',
    duration: 0,
  })

  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="scss">
html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;

  #play {
    height: 100%;
    width: 100%;

    .play-container {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
